import { Animated, StyleSheet, Pressable } from 'react-native'
import {
  useRef,
  useEffect,
  useContext,
  useImperativeHandle,
  forwardRef,
} from 'react'
import { NavigationContext } from '@react-navigation/native'

const TransparentContainer = forwardRef(function (props: any, ref) {
  const opacity = useRef(new Animated.Value(0)).current
  const navigation = useContext(NavigationContext)
  useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 100,
      useNativeDriver: false,
      delay: 380,
    }).start()
  }, [])
  function goBack() {
    Animated.timing(opacity, {
      toValue: 0,
      duration: 100,
      useNativeDriver: false,
    }).start(() => {
      navigation?.goBack()
    })
  }
  useImperativeHandle(
    ref,
    () => ({
      goBack: goBack,
    }),
    [],
  )
  return (
    <Animated.View
      style={[
        styles.bgm,
        {
          backgroundColor: '#00000088',
          opacity: opacity,
        },
      ]}
    >
      <Pressable onPress={goBack} style={styles.bgm} />
    </Animated.View>
  )
})

const styles = StyleSheet.create({
  bgm: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    left: 0,
    top: 0,
  },
})

export default TransparentContainer
